<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>
                    <h3>
                        <strong>已连接：【{{kongActiveServerUrl}}】</strong>
                        <div style="float:right;padding:0;color:green;font-size:18px">
                            <strong>总请求数【{{totalRequest}}】</strong>
                        </div>
                    </h3>
                </span>
            </div>
            <!-- <dresses-list :Option="kongServerConnections.data"></dresses-list> -->
            <avue-data-display :option="kongServerConnections"></avue-data-display>
        </el-card>       
        <!-- kong 节点信息展示  -->
        <el-row>
            <!-- 节点信息 -->
            <el-col :span="8">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>
                            <h3><strong>节点信息</strong></h3>
                        </span>
                    </div>
                    <avue-crud :option="nodeOption" :data="kongNodeInfos"></avue-crud>
                </el-card>
            </el-col>
            
            <!-- 配置信息 -->
            <el-col :span="8">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>
                            <h3><strong>配置信息</strong></h3>
                        </span>
                    </div>
                    <avue-crud :option="nodeOption" :data="kongConfigInfos"></avue-crud>
                </el-card>
            </el-col>
            
            <!-- 存储信息 -->
            <el-col :span="8">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>
                            <h3><strong>存储信息</strong></h3>
                        </span>
                    </div>
                    <avue-crud :option="nodeOption" :data="kongDbInfos"></avue-crud>
                </el-card>
            </el-col>

        </el-row>

        <!-- kong 插件信息 展示 -->
        <el-row>
            <el-card>
                <div slot="header" class="clearfix">
                    <span><h3><strong>插件信息</strong></h3></span>
                </div>
                <div class="tag-group">
                    <el-tag :disable-transitions="false"
                    v-for="plugin in kongPluginsInfos" :key="plugin.name" :type="plugin.type" style="margin-top: 5px" effect=dark>
                        <strong>{{plugin.name}}</strong></el-tag>                                      
                </div>
            </el-card>
        </el-row>


    </div>
</template>
<script>
import {activeProfile } from "@/api/kong/profile";
import {kongInfos,kongStatus } from "@/api/kong/kong";
import DressesList from '@/components/DressesList'
export default {
    components:{
        DressesList,
    },
    props:{

    },
    data(){
        return{
            kongInfos:{},
            kongStatus:{},
            kongActiveProfileInfo:{},
            totalRequest:0,
            // 数据库是否可用
            reachable:false,
            // kong server 连接信息
            kongServerConnections:{
                span:4,
                data:[
                    {
                        click: (item) => {},
                        name: "ACTIVE",
                        title: "活动",
                        count: 0,
                        icon: "icon-yonghuguanli",
                        color: "rgb(49, 180, 141)",
                    },
                    {
                        name: "READING",
                        title: "只读",
                        count: 0,
                        icon: "icon-shujuzhanshi2",
                        color: "rgb(56, 161, 242)",
                    },
                    {
                        name: "WRITING",
                        title: "写入",
                        count: 0,
                        icon: "icon-jiaoseguanli",
                        color: "rgb(117, 56, 199)",
                    },
                    {
                        name: "WAITING",
                        title: "等待",
                        count: 0,
                        icon: "icon-jiaoseguanli",
                        color: "rgb(117, 56, 199)",
                    },
                    {
                        name: "ACCEPTED",
                        title: "已确认",
                        count: 0,
                        icon: "icon-jiaoseguanli",
                        color: "rgb(117, 56, 199)",
                    },
                    {
                        name: "HANDLED",
                        title: "已处理",
                        count: 0,
                        icon: "icon-jiaoseguanli",
                        color: "rgb(117, 56, 199)",
                    },
                ]
            },
            // kong 节点信息
            kongNodeInfos:[],
            // kong 配置信息
            kongConfigInfos:[],
            // kong 数据库信息
            kongDbInfos:[],
            // kong 插件信息
            kongPluginsInfos:[],            
            // kong 信息 展示 配置
            nodeOption:{
                border: false,
                header: false,
                simplePage: true,
                showHeader: false,
                addBtn: false,
                delBtn: false,
                editBtn: false,
                refreshBtn: false,
                filterBtn: false,
                searchBtn: false,
                selectClearBtn: false,
                columnBtn: false,
                menuAlign: "right",
                menu: false,
                menuWidth: 180,
                align: "center",
                column: [
                { label: "名称", prop: "name" },
                { label: "值", prop: "value", width: 230, align: "left" },
                ],
            },

        }
    },
    mounted(){
    },
    created(){
        this.getKongInfos();
        this.getKongStatus();
        this.getKongxActiveProfile();
    },
    computed: {
        kongActiveServerUrl: function(){
            if(this.kongActiveProfileInfo){
                return this.kongActiveProfileInfo.url;
            }else{
                return "";
            }
        }
    },
    methods:{
        getKongInfos(){
            this.$store.dispatch('getKongInfos').then(response =>{
                // console.log(JSON.stringify(response));
                let _data=response.data;
                this.kongInfos=_data;
                if(!_data || !_data.plugins){
                    return;
                }
                this.kongPluginsInfos=_data.plugins;
                this.kongNodeInfos=[];
                this.kongConfigInfos=[];
                this.kongDbInfos=[];
                this.kongPluginsInfos=[];
                
                // 填入节点信息
                this.kongNodeInfos.push({name:"主机名称：",value:_data.hostname})
                this.kongNodeInfos.push({name:"标记线",value:_data.tagline})
                this.kongNodeInfos.push({name:"版本",value:_data.version})
                this.kongNodeInfos.push({name:"内核版本",value:_data.lua_version})
                this.kongNodeInfos.push({name:"监听地址",value:_data.configuration.admin_listen})
                // console.log(JSON.stringify(this.kongNodeInfos));

                let _config=_data.configuration;
                this.kongConfigInfos.push({name:"配置路径",value:_config.nginx_kong_conf});
                this.kongConfigInfos.push({name:"日志级别",value:_config.log_level});
                this.kongConfigInfos.push({name:"保持活力",value:_config.upstream_keepalive});
                this.kongConfigInfos.push({name:"访问日志",value:_config.proxy_access_log});
                this.kongConfigInfos.push({name:"错误日志",value:_config.proxy_error_log});

                // console.log(JSON.stringify(this.kongConfigInfos));

                this.kongDbInfos.push({name:"数据库",value:_config.database});
                this.kongDbInfos.push({name:"主机",value:_config.pg_host});
                this.kongDbInfos.push({name:"实例",value:_config.pg_database});
                this.kongDbInfos.push({name:"用户",value:_config.pg_user});
                this.kongDbInfos.push({name:"端口",value:_config.pg_port});
                
                // console.log(JSON.stringify(this.kongDbInfos));

                let _plugins =_data.plugins;
                for(let plugin in _plugins.available_on_server){
                    let type="info";
                    _plugins.enabled_in_cluster.forEach((item => {
                        if(item === plugin){
                            type="success";
                            return;
                        }
                    }));
                    this.kongPluginsInfos.push({ name: plugin, type: type });
                }
            })
        },
        getKongStatus(){
            kongStatus().then(res =>{
                // console.log(JSON.stringify(res));
                this.kongStatus=res.data;
                let _data=res.data;
                if(!_data){
                    return;
                }
                let server = _data.server;
                this.reachable=_data.database.reachable;
                this.kongServerConnections.data.forEach(item =>{
                    let _key= "connections_" + item.name.toLowerCase();
                    item["count"]=server[_key]
                });
                this.totalRequest =0 || server["total_requests"];
            })
        },
        getKongxActiveProfile(){            
            this.$store.dispatch("getKongActiveProfile").then((res) => {            
                this.kongActiveProfileInfo=res;
            });
        },

    }
    
}
</script>
<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}

</style>